<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码结果</title>
</head>

<body>
    <div class="main">
        <div style="font-size: 100px; margin-top: 50px;"><img src="./checkmark.png" width="150px" height="150px"></div>
        <div style="margin-top: 25px;">学生</div>
        <div style="margin-top: 40px;">
            <span id="name">点击修改姓名</span><input type="text" id="name-input" class="hidden">，验证成功，<span
                id="enter">点击修改出/入</span><select class="hidden" id="select">
                <option value="欢迎进入">欢迎进入</option>
                <option value="一路平安">一路平安</option>
            </select>。
        </div>
        <div style="margin-top: 30px; color:grey">本次扫码时间：</div>
        <div style="color: red; margin-top: 0px;" id="time"></div>
    </div>
    <div></div>
</body>
<style>
    body {
        margin: 0;
    }

    .main {
        text-align: center;
    }

    .main>div {
        font-size: 20px;
    }

    .hidden {
        display: none;
    }
</style>
<script>
    let $ = document.querySelector.bind(document);
    Element.prototype.$on = Element.prototype.addEventListener;
    setInterval(() => { $("#time").innerText = new Date().toLocaleString(); }, 1000);
    $("#name").$on("click", function () {
        $("#name-input").classList.toggle("hidden");
        $("#name").classList.toggle("hidden");
        $("#name-input").focus();
    });
    $("#name-input").$on("blur", function () {
        $("#name-input").classList.toggle("hidden");
        $("#name").classList.toggle("hidden");
        if ($("#name-input").value.trim() === "") { $("#name-input").value = "输入姓名" }
        $("#name").innerText = $("#name-input").value;
    });
    $("#enter").$on("click", function () {
        $("#select").classList.toggle("hidden");
        $("#enter").classList.toggle("hidden");
    });
    $("#select").$on("change", function () {
        $("#enter").innerText = $("#select").value;
        $("#select").classList.toggle("hidden");
        $("#enter").classList.toggle("hidden");
    });
</script>

</html>